﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Main.Master" AutoEventWireup="true"
    CodeBehind="View.aspx.cs" Inherits="APMS.WebSite.Views.Todo.View" %>

<%@ Import Namespace="APMS.WebSite.Common" %>    
<%@ Import Namespace="APMS.WebSite.Models.DataStore" %>
<%@ Import Namespace="APMS.WebSite.Models.ViewData.UserControls" %>

<asp:Content ID="ScriptContent" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" language="javascript">
        $(document).ready(function(){
        
            // Initialize ToDo title
            $('#main h1.title.editable input[type=text]').css({display:'none'});
            $('#main h1.title.editable').hover(function() {
                //$(this).css({ background: "#b6e377"});
            },function() {
                //$(this).css({ background: "#ffffff"});
            }).click(function(){
                $(this).children('span').css({display:'none'});
                $(this).children('input[type=text]').css({display:''}).focus();
            });
            $('#main h1.title.editable input[type=text]').blur(function() {
                // Update value to DB
                updateTodoName($('#projectId').val(), $('#todoId').val(), $(this).val());
                // Update Value
                $(this).siblings('span').html($(this).val()).css({display:''});
                $(this).css({display:'none'});
            });
            
            
            // Init ToDo Items
            $('li.todoItem input[type=text]').css({display:'none'});
            $('li.todoItem a.editTodoItem').click(function() {
                $(this).siblings('span.valueTodoItem').css({display:'none'});
                $(this).siblings('input[type=text]').css({display:''});
                $(this).css({display:'none'});
            });
            $('li.todoItem input[type=text]').blur(function() {
                var todoItemId = $(this).siblings('input[type=hidden]').val();
                var isCheck = $(this).siblings('input[type=checkbox]').attr('checked');
                // Update value to DB
                updateTodoItem($('#projectId').val(), $('#todoId').val(), todoItemId, $(this).val(), isCheck);
                // Update Value
                $(this).siblings('span.valueTodoItem').html($(this).val()).css({display:''});
                $(this).siblings('a.editTodoItem').css({display:''});
                $(this).css({display:'none'});
            });
            
        });
        
        function updateTodoName(projectId, todoId, value) {
            $.post("/InProject/" + projectId + "/Todo/Update/" + todoId, {
	            todoName: value
            }, function(response) {
                // Complete request, there is some error
                if(response != 'success') {
                    alert(response);
                } else {
                    $.jGrowl('Update  Todo title successfully', {speed:  'slow'});
	            }
            });
        }
        function updateTodoItem(projectId, todoId, todoItemId, value, isCheck) {
            $.post("/InProject/" + projectId + "/Todo/UpdateItem/" + todoId, {
	            todoItemId: todoItemId, 
	            todoItemValue: value
            }, function(response) {
                // Complete request, there is some error
                if(response != 'success') {
                    alert(response);
                } else {
                    $.jGrowl('Update  Todo Item successfully', {speed:  'slow'});
	            }
            });
        }
        function addTodoItem() {
         // div.content ul
            var newItem = '<li>';
            $('div.content ul').append('<li>')
        } 
	</script>
</asp:Content>
<asp:Content ID="PageTitleContent" ContentPlaceHolderID="PageTitleHolder" runat="server">
    <h2 class="nodesc"><%= Html.Encode(ViewData.Model.CurrentProject.ProjectName)%></h2>
    <h3>View To-Do</h3>
</asp:Content>
<asp:Content ID="NavigationMenuContent" ContentPlaceHolderID="NavigationMenuHolder" runat="server">
    <%=Html.RenderUserControl("~/Views/Shared/UserControls/MainNav.ascx", ViewData[BaseController.MAIN_NAV])%>
</asp:Content>
<asp:Content ID="CommandLinkContent" ContentPlaceHolderID="CommandLinkHolder" runat="server">
</asp:Content>
<asp:Content ID="SidebarContent" ContentPlaceHolderID="SidebarHolder" runat="server">
    <div class="widget">
        <h3 class="widgetTitle">Actions</h3>
        <ul class="widgetContent">
            <li><%=Html.ActionLink<TodoController>(x => x.Create(ViewData.Model.CurrentProject.ProjectID), "Create a new Todo", new { @class = "createItem" })%></li>
            <li><%=Html.ActionLink<TodoController>(x => x.Delete(ViewData.Model.CurrentProject.ProjectID, ViewData.Model.CurrentTodo.ToDoID), "Delete Todo", new { @class = "deleteItem" })%></li>
        </ul>
    </div>
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="ContentHolder" runat="server">
    <input type="hidden" id="projectId" value="<%=ViewData.Model.CurrentProject.ProjectID %>" />
    <input type="hidden" id="todoId" value="<%=ViewData.Model.CurrentTodo.ToDoID %>" />
    
    <div class="contentWrap">
        <%
            Project currentProject = ViewData.Model.CurrentProject;
            ToDo todo = ViewData.Model.CurrentTodo;
            List<ToDoItem> allToDoItems = ViewData.Model.ToDoItems;

            if (todo != null )
            {
                StringBuilder builder = new StringBuilder();
                //string viewToDoLink = "/InProject/" + currentProject.ProjectID + "/Todo/View/" + todo.ToDoID;
                string addToDoItemLink = "/InProject/" + currentProject.ProjectID + "/Todo/AddItem/" + todo.ToDoID;
                
                // ToDo Content
                builder.AppendLine("<div class=\"todo\">");
                builder.AppendFormat("<h1 class=\"title editable\"><span>{0}</span><input id=\"{1}\" type=\"text\" value=\"{0}\" style=\"width:100%;font-weight:bold;font-size:18px;\"/></h1>",
                    todo.ToDoName, 
                    "todo_" + todo.ToDoID);
                builder.Append("<div class=\"content\"><ul>");
                foreach (ToDoItem item in allToDoItems)
                {
                    string todoItemCheckboxId = "todo_" + todo.ToDoID + "_item_check" + item.ToDoItemID;
                    string todoItemTextId = "todo_" + todo.ToDoID + "_item_text" + item.ToDoItemID;
                    
                    // Loop all ToDoItem
                    builder.AppendFormat("<li class=\"todoItem\"><input id=\"{0}\" type=\"checkbox\" /> <span class=\"valueTodoItem\">{2}</span><input id=\"{1}\" type=\"text\" style=\"width:90%;font-weight:bold;font-size:18px;margin:10px;\" value=\"{2}\" /> <a href=\"#\" class=\"editTodoItem\">[Edit]</a><input type=\"hidden\" value=\"{3}\" /></li>",
                        todoItemCheckboxId, 
                        todoItemTextId,
                        item.ToDoItemDetail, 
                        item.ToDoItemID);
                }
                builder.Append("</ul></div>");
                
                // ToDo Action
                builder.AppendFormat("<div class=\"meta\"><span>Created by: {0} on {1}</span> | <a href=\"{2}\">Add an item</a></div>", 
                    todo.UserName, 
                    todo.ModifyDate.ToString(AppHelper.DateTimeFormat),
                    addToDoItemLink);
                
                
                builder.AppendLine("</div>");

                Response.Flush();
                Response.Write(builder.ToString());
            }
        %>
    </div>
</asp:Content>

